<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>前端代码的改造</title>
	</head>
	<body>
		<button type="button" id="connect">连接</button>
		<button type="button" id="send" disabled="true">发送数据</button><br>
		从服务端接收的数据如下：<br>
		<span id="recv">

		</span>
		<script type="text/javascript">
			var connect = document.getElementById('connect')
			var send = document.getElementById('send')
			var recv = document.getElementById('recv')
			let ws = null
			connect.onclick = function() {
				ws = new WebSocket('ws://localhost:9998')
				ws.onopen = () => {
					console.log('连接服务器成功了')
					send.disabled = false
				}
				ws.onclose = () => {
					console.log('连接服务器失败')
					send.disabled = true
				}
				ws.onmessage = msg => {
					console.log('接收到从服务器发送过来的数据')
					console.log(msg)
					recv.innerHTML = msg.data
				}
			}
			send.onclick = function() {
				ws.send(JSON.stringify({
					action:'getData',
					socketType:'trendData',
					chartName:'trend',
					value:''
				}))
			}
		</script>
	</body>
</html>
